<template>
    <div class="order-cost-form">
        <div class="cost_item">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">项目货值</div>
                <div class="adjustOrderItem_right">
                    <div class="show_text">
                        {{ totalPrice }}
                    </div>
                </div>
            </div>
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">内部货值</div>
                <div class="adjustOrderItem_right">
                    <el-input-number v-model="innerPrice" :precision="2" :min="0" label="内部货值"></el-input-number>
                </div>
            </div>
        </div>
        <div class="cost_item_solid" v-if="operationList.includes('editCost')"></div>
        <div class="cost_item" v-if="operationList.includes('editCost')">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">预估成本</div>
                <div class="adjustOrderItem_right">
                    <div style="display: flex">
                        <div>预估成本</div>
                        <el-tooltip class="item" effect="dark" content="自营媒体成本 + 外采媒体成本" placement="top-start">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        <div style="padding-left: 20px;">{{ estimatedCost }}</div>
                    </div>
                    <div style="padding-top: 10px;">
                        自营媒体成本：<el-input-number v-model="estimatedSelfMediaCost" @change="changeEstimatedCost"
                            :precision="2" :min="0" label="自营媒体成本"></el-input-number>
                    </div>
                    <div style="padding-top: 10px;">
                        外采媒体成本：<el-input-number v-model="estimatedExternalMediaCost" @change="changeEstimatedCost"
                            :precision="2" :min="0" label="外采媒体成本"></el-input-number>
                    </div>
                </div>
            </div>
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">实际成本</div>
                <div class="adjustOrderItem_right">
                    <!-- <el-input-number v-model="actualCost" :precision="2" :min="0" label="实际成本"></el-input-number> -->
                    <div style="display: flex">
                        <div>实际成本</div>
                        <el-tooltip class="item" effect="dark" content="自营媒体成本 + 外采媒体成本" placement="top-start">
                            <i class="el-icon-question"></i>
                        </el-tooltip>
                        <div style="padding-left: 20px;">{{ actualCost }}</div>
                    </div>
                    <div style="padding-top: 10px;">
                        自营媒体成本：<el-input-number v-model="actualSelfMediaCost" @change="changeActualCost" :precision="2"
                            :min="0" label="自营媒体成本"></el-input-number>
                    </div>
                    <div style="padding-top: 10px;">
                        外采媒体成本：<el-input-number v-model="actualExternalMediaCost" @change="changeActualCost"
                            :precision="2" :min="0" label="外采媒体成本"></el-input-number>
                    </div>
                </div>
            </div>
        </div>
        <div class="cost_item_solid"></div>
        <div class="cost_item">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">盲盒收入</div>
                <div class="adjustOrderItem_right">
                    <div class="show_text">
                        {{ blindBoxPrice }}
                    </div>
                </div>
            </div>
            <div class="adjustOrderItem" v-if="operationList.includes('editRealPrice')">
                <div class="adjustOrderItem_left">盲盒实收</div>
                <div class="adjustOrderItem_right">
                    <el-input-number v-model="blindRealPrice" @change="changeRealPrice" :precision="2" :min="0"
                        label="盲盒实收"></el-input-number>
                </div>
            </div>
        </div>
        <div class="cost_item">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">卖货收入</div>
                <div class="adjustOrderItem_right">
                    <div class="show_text">
                        {{ salePrice }}
                    </div>
                </div>
            </div>
            <div class="adjustOrderItem" v-if="operationList.includes('editRealPrice')">
                <div class="adjustOrderItem_left">卖货实收</div>
                <div class="adjustOrderItem_right">
                    <el-input-number v-model="saleRealPrice" @change="changeRealPrice" :precision="2" :min="0"
                        label="卖货实收"></el-input-number>
                </div>
            </div>
        </div>
        <div class="cost_item" v-if="operationList.includes('editRealPrice')">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">项目实收</div>
                <div class="adjustOrderItem_right">
                    <div class="show_text">
                        {{ realPrice }}
                    </div>
                </div>
            </div>
        </div>
        <div class="cost_item">
            <div class="adjustOrderItem">
                <div class="adjustOrderItem_left">订单去向</div>
                <div class="adjustOrderItem_right">
                    <el-select v-model="orderGo" placeholder="请选择">
                        <el-option v-for="item in moreOptionsList" :key="item.id" :label="item.sysValueName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="adjustOrderItem" v-if="orderGo != 155">
                <div class="adjustOrderItem_left">预计变现</div>
                <div class="adjustOrderItem_right">
                    <el-input-number v-model="expectPrice" :precision="2" :min="0" label="预计变现"></el-input-number>
                </div>
            </div>
        </div>
        <div class="cost-footer">
            <div>
                <el-button type="primary" @click="submitCostOrder">确定</el-button>
            </div>
            <div style="padding-left: 20px">
                <el-button type="warning" @click="splitOrderClick">拆单</el-button>
            </div>
        </div>

        <el-dialog title="拆单" :visible.sync="splitOrderNewDialog" width="80%" :close-on-click-modal="false">
            <splitOrder :order-id="chooseOrderId" @closeDialog="closeSplitOrderNewDialog"
                @doRefushSplitOrder="doRefushSplitOrder" :split-order-type="2"></splitOrder>
        </el-dialog>

    </div>
</template>

<script>
import APIOrder from "@/api/apiOrder";
import qs from "qs";
import APISysLabel from "@/api/apiSysLabel";
import splitOrder from "@/views/order/pages/splitOrder/SplitOrder";

export default {
    name: "EditCost",
    components: {
        splitOrder,
    },
    props: {
        operationList: Array,
        isShow: Boolean,
    },
    data() {
        return {
            totalPrice: null,
            estimatedCost: null,
            actualCost: null,
            innerPrice: null,
            blindBoxPrice: null,
            salePrice: null,
            blindRealPrice: null,
            saleRealPrice: null,
            realPrice: null,
            chooseOrderId: null,
            moreOptionsList: [],
            orderGo:null,
            expectPrice: null,
            splitOrderNewDialog: false,
            estimatedSelfMediaCost: null,
            estimatedExternalMediaCost: null,
            actualSelfMediaCost: null,
            actualExternalMediaCost: null,
        };
    },
    activated() {
        if(localStorage.getItem("editCostOrder")){
            this.getMoreOptionsList()
            let row = JSON.parse(localStorage.getItem("editCostOrder"))
            this.chooseOrderId = row.id
            this.totalPrice = row.totalPrice
            this.actualCost = row.actualCost
            this.estimatedCost = row.estimatedCost
            this.innerPrice = row.innerPrice
            this.blindBoxPrice = row.blindBoxPrice
            this.salePrice = row.checkCashPrice
            this.blindRealPrice = row.blindRealPrice
            this.saleRealPrice = row.saleRealPrice
            this.realPrice = row.realPrice
            this.orderGo = row.orderGo
            this.expectPrice = row.expectPrice;
            this.estimatedSelfMediaCost = row.estimatedSelfMediaCost;
            this.estimatedExternalMediaCost = row.estimatedExternalMediaCost;
            this.actualSelfMediaCost = row.actualSelfMediaCost;
            this.actualExternalMediaCost = row.actualExternalMediaCost;
        }
    },
    methods: {
        changeActualCost() {
            this.actualCost = (this.actualSelfMediaCost ? this.actualSelfMediaCost : 0) + (this.actualExternalMediaCost ? this.actualExternalMediaCost : 0)
        },
        changeEstimatedCost(){
            this.estimatedCost = (this.estimatedSelfMediaCost ? this.estimatedSelfMediaCost : 0) + (this.estimatedExternalMediaCost ? this.estimatedExternalMediaCost : 0)
        },
        splitOrderClick(){
            this.splitOrderNewDialog = true;
        },
        doRefushSplitOrder() {
            this.splitOrderNewDialog = false;
        },
        closeSplitOrderNewDialog() {
            this.splitOrderNewDialog = false
        },
        // 获取更多操作
        getMoreOptionsList() {
            const params = {
                token: this.$store.state.token,
                sysLabelIds: 42,
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    this.moreOptionsList = res.result.data[42]
                }
            });
        },
        changeRealPrice(){
            this.realPrice = this.saleRealPrice + this.blindRealPrice
        },
        submitCostOrder(){
            const params = {
                orderId: this.chooseOrderId,
            };
            if (this.estimatedCost || this.estimatedCost === 0) {
                params.estimatedCost = this.estimatedCost
            }
            if (this.actualCost || this.actualCost === 0) {
                params.actualCost = this.actualCost
            }
            if (this.innerPrice || this.innerPrice === 0) {
                params.innerPrice = this.innerPrice
            }
            if (this.blindRealPrice || this.blindRealPrice === 0) {
                params.blindRealPrice = this.blindRealPrice
            }
            if (this.saleRealPrice || this.saleRealPrice === 0) {
                params.saleRealPrice = this.saleRealPrice
            }
            if ((this.blindRealPrice || this.blindRealPrice === 0) && (this.saleRealPrice || this.saleRealPrice === 0)) {
                params.realPrice = this.blindRealPrice + this.saleRealPrice
            }
            if (this.orderGo) {
                params.orderGo = this.orderGo
            }
            if (this.expectPrice || this.expectPrice === 0) {
                params.expectPrice = this.expectPrice
            }
            if (this.estimatedSelfMediaCost || this.estimatedSelfMediaCost === 0) {
                params.estimatedSelfMediaCost = this.estimatedSelfMediaCost
            }
            if (this.estimatedExternalMediaCost || this.estimatedExternalMediaCost === 0) {
                params.estimatedExternalMediaCost = this.estimatedExternalMediaCost
            }
            if (this.actualSelfMediaCost || this.actualSelfMediaCost === 0) {
                params.actualSelfMediaCost = this.actualSelfMediaCost
            }
            if (this.actualExternalMediaCost || this.actualExternalMediaCost === 0) {
                params.actualExternalMediaCost = this.actualExternalMediaCost
            }
            APIOrder.doEditOrderCost(params).then((res) => {
                if (res.key === 1000) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                }
            });
        },
    },
};
</script>

<style lang="sass" scoped>
.order-cost-form
    background-color: white
    .cost_item_solid
        border-bottom: 1px solid #e3e3e3
    .cost_item
        display: flex
        .adjustOrderItem
            margin: 20px auto
            padding-left: 40px
            display: flex
            width: 100%
            .adjustOrderItem_left
                width: 100px
                margin: 11px auto
            .adjustOrderItem_right
                width: 100%
                .show_text
                    margin: 11px auto
    .cost-footer
        padding-top: 50px
        display: flex
        justify-content: center
</style>
